<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>循环递归</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0
    }

    .tree img {
        width: 15px;
        height: 15px;
    }

    .tree ul {
        padding-left: 14px;
    }

    ul,
    li {
        list-style: none;
    }

    .tree ul li {
        line-height: 40px;
    }

    .tree ul li img {
        vertical-align: middle;
        cursor: pointer;
    }

    .tree ul li span {
        vertical-align: middle;
    }
      .tree ul li img.person {
      	width: 17px;
      	height: 21px;
      }
    </style>
</head>

<body>
    <div class="tree">

            <li>
                <p><img src="images/putTree.png"> <span>一级</span></p>
                <ul>
                    <li>
                        <p><img src="images/treePerson.png" class="person"> <span>二级</span></p>
                    </li>
                    <li>
                        <p><img src="images/showTree.png"> <span>二级</span> </p>
                        <ul>
                            <li>
                                <p>三级</p>
                            </li>
                            <li>
                                <p>三级</p>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>一级二</li>
  
    </div>
    <script type="text/javascript" src="depart.js"></script>
    <script type="text/javascript">
    console.log(res.data)

    function treeLoop(val) {
        // console.log(val)
        if (val.length > 0) {
            for (var k in val) {
                console.log(val[k].groupName)
                if (val[k].nextLevelGroups.length > 0) {

                    treeLoop(val[k].nextLevelGroups)

                }
            }
        }
    }
    treeLoop(res.data)
    </script>
</body>

</html>